<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  </head>

  <body>
    <div id="app">
      <input type="" value="" v-model="firstname" />+
      <input type="" value="" v-model="lastname" />=
      <input type="" value="" v-model="fullname" />
      <div>{{number.a + number.b}}</div>
    </div>

    <script type="text/javascript">
      var vm = new Vue({
        el: '#app',
        data: {
          firstname: '一',
          lastname: '缕清风',
          fullname: '',
          number: {
            a: 1,
            b: 1,
          }
        },
        methods: {},
        watch: {
          firstname(newvalue, oldvalue) {
            this.fullname = newvalue + this.lastname;
          },
          // lastname(newvalue, oldvalue) {
          //   this.fullname = this.firstname + newvalue;
          // }
          lastname: {
            handler(newvalue, oldvalue) {
              console.log("watch:lastname 执行了");
              this.fullname = this.firstname + newvalue;
            },
            immediate: true,
          },
          "number.a": {
            handler(newvalue, oldvalue) {},
            immediate: true,
          },
          number: {
            handler(newvalue, oldvalue) {
              console.log("number的深度监视watch")
            },
            deep: true, //深度监视
            immediate: true,
          }
        }
      })
      vm.$watch("lastname", {
        handler(newvalue, oldvalue) {
          setTimeout(() => {
            console.log("vm.$watch:lastname 执行了");
            this.fullname = "vm.$watch:lastname 执行了";
          }, 1000);
        },
        immediate: true,
      })
      //简写
      vm.$watch("lastname", function (newvalue, oldvalue) {})

    </script>
  </body>

</html>
